home *** CD-ROM | disk | FTP | other *** search
/ MacUser Mac Bin 25 / MACUSER-MACBIN25-1995-12.ISO.7z / MACUSER-MACBIN25-1995-12.ISO / 本誌連動 / HyperCard office.9512⁄CD / 95-09 < prev    next >
Text File  |  1995-10-01  |  12KB  |  225 lines
  1. ハイパーカードでウェッブ！
  2.  
  3. インターネットが一般にも認知されワールド・ワイド・ウェッブ（WWW）が普及してきた。ハイパーカードを駆使してこの波に乗ってしまおう。
  4.  
  5. --
  6. 情報共有とWWW
  7.  
  8. 　WWWとともにインターネットが急速に裾野を広げている。グラフィックを使った表現と、ハイパーリンクによる小気味よいナビゲーションは、新しい時代の情報ツールと呼ぶにふさわしいものだ。ところで、既に利用している人はよくご存知の通り、このWWWブラウザというアプリケーションは、インターネット上の資源に限らずローカルディス上のファイルでも、同じように働く( _*注1_ )。これを利用すると、例えばマニュアルや社内連絡をグラフィック付きのハイパーテキストで提供することができる。しかも、この形式ならマッキントッシュに限らず、Windowsでもそのまま同じ情報を表示できるというおまけつきだ。
  9. 　問題は、いかにして情報をHTML( _*注2_ )で提供するかというところである。ハイパーカードの場合は、仕組みづくりにスクリプティングなどの準備が必要だが、情報自体はほとんど単純なテキストで良かった。逆にWWWでは、高度な表示機能をブラウザが持っている代わりに、提供側がリンクなどの仕掛けを情報の中に埋め込まなければならないのである。
  10. 　毎日生み出される情報をいちいちHTMLに書き直しているのでは手間がかかって仕方がない。かといって時間があるときにまとめてなどと考えていると、情報はどんどん古くなるし、忙しさの中で立ち消えになる恐れもある。
  11. 　しかし、HTMLといえども所詮はテキストファイル。ハイパーカードでうまく処理することが可能なのではないか。
  12. --
  13. HTMLとタグ
  14.  
  15. 　HTMLは、普通のテキストの中にタグと呼ばれる記号を埋め込むことで、文書の形を整えたり、他のファイルにジャンプしたりできるようにしたものである。例えばある部分をイタリック体にしたければ
  16. 　<I>イタリックにする部分</I>
  17. とするだけだ。理屈は簡単だが、これをエディタ上で一つづつ書き込んでいくのはいかにも効率が悪い。テキストを選択し、ボタンを押せば自動的にタグが埋め込まれるという機能が欲しいところだ。
  18. 　前回までの連載で示したように、こういう文字列処理は、ハイパーカードの得意とするところである。世の中には、HTMLエディタと呼ばれるものがいくつも出回っているが、組織的に情報をHTML化するには、自分たちの情報形態に応じてカスタマイズできるものが必要だ。文字列処理の応用編として、スタック版HTMLエディタを作ることにしよう。
  19.  
  20. --
  21. ハイパーカードでのタグ付け
  22.  
  23. 　スタックによるHTMLエディタの基本は、マウスで選択（セレクト）したフィールドのテキストに対して、ボタンでタグ付けの命令を出せるような仕組みである。
  24. 　選択部分の情報はthe selectedChunkという関数を使ってchar XX to YY of bkgnd field 1のように取得できる。この部分をイタリック体にするにはリスト1のようにすればよい。選択部分のポジションを調べ(1)、その内容を取り出し(2)、前後にタグをつけ加えてもういちど同じところに書き込む(3)という操作だ。ほかのタグを挿入する場合も、BindMeの引数を変えるだけで済む。
  25. 　ハイパーリンクも、このタグ付けの簡単な応用である。 _リスト2_ を見てみよう。最初の部分は _リスト1_ のBindMeと同じ。answer fileでリンクするファイルを選び、<A HREF="file name">のようにタグを付け( _*注3_ )、もとの場所に書き込む。これだけの操作で、選択部分がWWW上でアンカー( _*注4_ )となり、クリックするとFileNameで指定されたファイルが呼び出される。
  26. 　画像の取り込みも基本的に違いはない。タグの書式が異なるので、リスト2の(2)の部分が(3)のようになるだけである。
  27.  
  28.  
  29. --
  30. 簡単版エディタスタック
  31.  
  32. 　これだけの材料でも充分HTMLエディタができるので早速試してみよう。スタックは、テキスト編集用のフィールドのほか、タグ付けやファイル・画像リンクのためのボタン数種類を加えただけのものだ。バックグラウンドに _リスト1_ のBindMeハンドラを置き、左の３つのボタンからこれを呼び出す。右の２つのボタンにはそれぞれ _リスト2_ のスクリプトを用意する。画面1-1のようになる。以上である( _*注5_ )。
  33. 　フィールドに適当なテキストを用意し、文字列をセレクトしてどれかボタンをクリックしてみよう。直ちにタグが挿入されるはずだ。画像ファイルを用意して「Image」をクリックすると、ちゃんと<IMG SRC=...>というタグも加わった。このようにしてタグ付けした画面1-2のテキストをWWWブラウザで表示してみると、画面1-3のようになる。申し訳ないほど単純な仕組みで、いちおうWWWのようなものができあがってしまった。
  34.  
  35. --
  36. HyperDBとの連動
  37.  
  38. 　ここまではごく普通のHTMLエディタを真似してみたに過ぎない。本企画のコンセプトどおりテキストデータを徹底活用するために、次に７月号のHyperDBのファイル（以下HDB）( _*注6_ )をHTML形式に変換する機能を考えてみよう。
  39. 　WWWでは、冒頭にタイトルの一覧が示され、クリックすると本文にジャンプするようになっているものが多い。WWWでの情報閲覧はリンクが頼りなので、こうしたリストを最初に用意するのは大切なことである。HDBのように、タイトルと本文という構造が明確なテキストは、比較的簡単にリンクリストを作成することができる。
  40. 　HTMLのリストは図1のように表現するが、目次のときは<LI>のうしろにリンク先を示すタグ<A HREF="#MyName">...を加える( _*注7_ )。リンク先には参照名を示すタグ<A NAME="MyName">...を用意しておく。ではHDBを読み込んでこれらのタグを割り当てていくことにしよう。
  41.  
  42. --
  43. HyperDBのファイルの自動変換
  44.  
  45. 　 _リスト3_ は、HDBのデータstrを処理する関数だ。今回のハイライトなので詳しく解説する。
  46. 　まず(1)で変数の初期化を行う。sepはHDBのレコード区切り行である。statusは、処理している行が見出しか、本文かなどを区別するためのフラグ。値が1なら、次の行が見出しであることを示している。LinkIDは、処理中のレコードが何番目のものかを示す。
  47. 　(2)以下が実際のデータ処理の部分である。strを1行ずつ調べ、statusのフラグに従って分岐を行う。
  48. 　処理する行が区切り行の場合(3)はstatusを1にセットし、次に来る行が見出し行であることを宣言する。そして(4)以下で見出しのリンク付けを行うわけだ。
  49. 　まず参照名を変数LinkNameにセットし(5)、これを使ってリンクリストを作成する(6)。<A HREF=...>でアンカーをつくり、リスト形式とするために行頭に<LI>タグを加えているのである。
  50. 　(7)で参照先の見出しを作成する。行頭に<DT>というタグを加えて辞書スタイルの表示ができるようにした。見出し処理が終わったらLinkIDを一つ繰り上げる。
  51. 　(8)以下では本文の処理を行うが、見出しの次の行のみ行頭に<DD>というタグを加える。辞書スタイルのリストで、ここからが本文であることを示すためだ。
  52. 　全ての行の処理が終わったら、(9)で一覧には<UL>、本文には<DL>タグをつけ加え、適切なリスト表示ができるように設定した上で結果を返す。
  53. 　このスクリプトを使って今回の原稿をHTML化したのが画面2である。WWWで表示すると、画面3のようになった。
  54.  
  55. --
  56. 定型文書処理への応用
  57.  
  58. 　前項のHDBデータの処理の基本は、
  59. 　❶ある規則に従ったデータを読み込み
  60. 　❷各行についてそれが見出しか本文かを判断し
  61. 　❸見出し部分に参照用のタグを加え、同時にリンクリストとしても抽出する
  62. という流れであった。ポイントは、どうやって見出し行を判断するかということである。これさえ押さえれば、様々な箇条書きタイプのオフィス文書を、同じ手法でHTMLに自動変換できるはずだ。
  63. 　例えば、1,2,3...と半角数字で見出しを付けた箇条書き文書の処理を考えると、
  64.     put 1 into SectionID
  65.     repeat
  66.         if word 1 of theLine is SectionID then
  67.             （見出しの処理）
  68.             add 1 to SectionID
  69.         else
  70.         ...
  71. のような形で見出しを見分けることができる。
  72. 　こうした自動変換を応用すれば、規則的な書式の規定集などを一括してHTMLに変換することも難しくない。WWWによるハイパーマニュアルも、意外にすんなりと実現可能なのではないだろうか。
  73. 　サンプルスタック(HyperHTEdit)には、ハイパートークで実現可能な範囲で様々な編集用スクリプトを用意した。これらを参考に、自分のニーズにあったエディタを工夫し、オフィス文書のHTML化に挑戦してみて欲しい。
  74.  
  75. --
  76. *注1
  77.  
  78. この場合はTCPなどの設定も必要ないので、ファイルさえあればすぐに社内WWWを始めることができる。
  79.  
  80. --
  81. *注2
  82.  
  83. HyperText Markup Language。WWWで表示するためのドキュメントを作成する書式で、通常のテキストに文章の論理構造を示す「タグ」といわれるマークを加えたもの。 _HTMLについて_ 及び _基本的なタグ_ 参照
  84.  
  85.  
  86. --
  87. *注3
  88.  
  89. 他のフォルダにあるファイルを参照する場合も同じだが、WWWではパスを区切るのに":"ではなくUNIX風に"/"を使うので、これを置き換える必要がある。
  90.  
  91. --
  92. *注4
  93.  
  94. リンクを行うタグのことをアンカー（錨）と呼ぶ。<A ...>というタグはAnchorの意味である。
  95.  
  96. --
  97. *注5
  98.  
  99. ボタンの _オートハイライト_ をオフにすることに注意。こうしておかないと、ボタンをクリックした瞬間にテキストフィールドの選択が解除されてしまい、the selectedChunkを使って目的の文字列を取得できなくなってしまう。
  100.  
  101. --
  102. *注6
  103.  
  104. レコードをハイフン2つの行（--）で区切り、各レコードの最初の1行を見出しとするテキストファイル。添付CD-ROMに、これまでの連載のテキストをこの形式で収録している。
  105. ( _95-07:データファイルの作成_ 参照)
  106.  
  107. --
  108. *注7
  109.  
  110. リンク先が文書内の特定の場所になるときは、参照名の前に#を付ける。別のファイルなら<A HREF="FileName#MyName">となる。
  111.  
  112. --
  113. リスト1
  114.  
  115. on mouseUp
  116.     BindMe "<I>" -- イタリックのタグを設定する場合
  117. end mouseUp
  118.  
  119. on BindMe Tag
  120.     get the selectedChunk    --(1)
  121.     put word 2 of it into p1
  122.     put word 4 of it into p2
  123.     get char p1 to p2 of fld 1    --(2)
  124.     put Tag into EndTag
  125.     put "/" after char 1 of EndTag
  126.     put Tag & it & EndTag into char p1 to p2 of fld 1    --(3)
  127. end BindMe
  128.  
  129. --
  130. リスト2
  131.  
  132.     get the selectedChunk
  133.     put word 2 of it into p1
  134.     put word 4 of it into p2
  135.     answer file "リンクするファイルを選んで下さい"
  136.     put lastHCItem(":", it) into FileName -- _lastHCItem_ は解説参照
  137.     get char p1 to p2 of fld 1    --(1)
  138.     put "<A HREF=" & QUOTE & FileName & QUOTE & ">" & it & "</A>" into char p1 to p2 of fld 1    --(2) _PUT X into Y_ の解説参照
  139.  
  140.     --インライン画像の場合は(1)を省略し、(2)を次のように書き換える
  141.     put "<IMG SRC=" & QUOTE & FileName & QUOTE & ">" before char p1 of fld 1    --(3)
  142.  
  143. --
  144. リスト3
  145.  
  146. function readHDB str
  147.     --(1)
  148.     put "--" into sep
  149.     put 1 into status
  150.     put 1 into LinkID
  151.     put QUOTE into Q
  152.     put RETURN into CR
  153.     put "" into Titles
  154.     put "" into bodyStr
  155.     
  156.     --(2)
  157.     repeat with i= 1 to number of lines of str
  158.         set cursor to busy
  159.         get line i of str
  160.  
  161.         if it is sep then    --(3)
  162.             put 1 into status
  163.  
  164.         else if status is 1 then    --(4)
  165.             put "P" & LinkID into LinkName    --(5)
  166.             put "<LI><A HREF=" & Q &"#" & LinkName & Q & ">" & it & "</A>" & CR after Titles    --(6)
  167.             put "<DT><A NAME=" & Q & LinkName & Q &"><B>" & it & "</B></A>" &"<BR>" & CR after bodyStr    --(7)
  168.             put 2 into status
  169.             add 1 to LinkID
  170.     --(8)
  171.         else if status is 2 then
  172.             put "<DD>" & it & "<BR>" & RETURN after bodyStr
  173.             put 0 into status
  174.  
  175.         else
  176.             put it & "<BR>" & RETURN after bodyStr
  177.         end if
  178.     end repeat
  179.     --(9)
  180.     put "<DL>" & CR & bodyStr & CR & "</DL>" into bodyStr
  181.     return "<UL>" & CR & Titles &"</UL>" & CR & "<HR>" & CR & bodyStr
  182. end readHDB
  183.  
  184. --
  185. PUT X into Y
  186.  
  187. Xの内容をBに代入するという最も基本的な命令ですが、これをput X into char 3 to 4 of Yとした場合、Xが2文字以上あるとどうなるでしょう。例えば
  188.     put "12345678" into Y
  189.     put "abcd" into char 3 to 4 of Y
  190. とすると、Yは12abcd78と上書きされずに12abcd5678と割り込まれた形になります。この仕組みがあるために、リスト1の(2),(3)のように、char p1 to p2として取得した文字列にタグを加え、もう一度char p1 to p2に書き込むということが可能になるのです。
  191. また、put "/" after char 1 of Y とするとYは1/2345678となります。これを利用して、タグ<B>から終了のタグ</B>を作ります。
  192.  
  193. --
  194. lastHCItem
  195.  
  196. これはHomeスタックに用意されているユーティリティ関数です。文字列strがcという文字でいくつかの部分に区切られているとき、lastHCItem(c,str)とするとその最後の部分が返されます。例えばlastHCItem(":", "HD:MacUser:MyFile")とするとパス名からファイル名MyFileだけを取り出すことができるのです。
  197.  
  198. --
  199. オートハイライト
  200.  
  201. ボタンの属性の一つで、クリックしたときにmouseDownでハイライト（黒）になり、mouseUpで通常に戻るという設定です。基本的にハイパーカードでは、フィールドの選択部分も含めて同時にハイライトされる部分は1カ所だけなので、ボタンをクリックしたときにオートハイライトがセットされていると、フィールドの選択が解除されてしまいます。
  202.  
  203. --
  204. HTMLについて
  205.  
  206. HTML(HyprtText Markup Language)とは、WWWブラウザでハイパーテキストの表示をするために、普通のテキスト文書にマークアップタグ(markup tags)という記号を加えた表現形式です。これは本来は見出しや段落といった「文書の論理構造」を記述するための方法で、実際の表現（フォントやレイアウトの選択）はブラウザに任されています。したがって、機種やブラウザを問わずに同じデータを表現できる代わりに、ブラウザごとに少しずつ見え方が違う可能性があります。
  207.  
  208. --
  209. 基本的なタグ
  210.  
  211. HTMLでは現在、数十種類のタグが使われていますが、基本的な数種類のタグを使えば、充分立派なHTML文書を書くことができます。
  212. よく使うものとしては：
  213.     <TITLE>    文書のタイトルで、マッキントッシュではウィンドウのタイトルとして扱われます。
  214.     <BR>    改行。WWWブラウザは文書中の改行コードを無視するので、改行したいときはこのタグを入れておかなければなりません。
  215.     <P>    段落。改行した上でさらに１行分スペースが空きます。
  216.     <HR>    罫線（Horizontal Rule）。ヘアラインともいいます。
  217.     <Hn>    見出し。nは1〜6の数字で、数字が小さいほど文字は大きく表現されます。具体的なフォントサイズはブラウザ側で指定します。
  218.     <B><I><U>    ボールド、イタリック、下線。
  219.     <OL><UL>    アイテムリストを示すタグ。項目は<LI>で示します。本文の図1を参照。
  220.  
  221.     <A>    リンクを表現する。<A HREF=destination>とするとdestinationにジャンプするアンカーになります。本文も参照。
  222.     <IMG>    インライン画像。<IMG SRC="GIFfile">でGIFfileがその場所に表示されます。
  223. 雑誌や解説書が多数あるので参照して下さい。
  224. --
  225.